{layout name="lottery/header" /}
<div id="app">
    <div class="lottery-wrapper lottery-main j_wrapper">
        
        <div class="popup rule-popup hide" id="j-rules">
            <div class="popup_card rule-card">
                <div class="popup_close j-pclose"></div>
                <div class="popup_rule">
                    <div class="popup_title">活动规则</div>
                    <div class="popup_content" v-html="lottery.rule">
                    </div>
                </div>
            </div>
        </div>
        <div class="draw-for-prize">
            <div class="drp-bg" style="background: url({$lottery.background_img}) no-repeat top center/100%;">
                <!---->
                <div class="rule" id="j-call-rules" style="">
                    活动规则
                </div>
                <div class="drp-info">
                    <p class="my-info clear">
                        <span v-if="lottery.lottery_type==1">
                            本日可抽奖<i id="j_my_count">{{nums}}</i>次
                        </span>
                        <span v-else="lottery.lottery_type==1">
                            可抽奖<i id="j_my_count">{{nums}}</i>次
                        </span>
                        <a id="j_my_record" @click="toList()">
                            查看我的奖品
                        </a>
                    </p>
                    <p v-if="lottery.lottery_type==1" class="exp" style="background:#5800ff;">
                        每位用户每天可参与抽奖{{lottery.nums}}次
                    </p>
                    <p v-else class="exp" style="background:#5800ff;">
                        每位用户可参与抽奖{{lottery.nums}}次
                    </p>
                </div>
                <div class="drp-box" style="background: url(lottery_static/img/light.gif) no-repeat top center/100%;">
                    <div class="drp-content" v-bind:class="{active:draw_status}"
                        style="background: url({$lottery.prize_img}) no-repeat top center/100%;">
                        <span class="go-btn" id="j-go" @click="draw()"></span>
                        <div class="drp-content-cover" style=""></div>
                    </div>
                </div>
                <p class="tips">以上图片仅供参考，请以实际奖品为准</p>
                <div class="scroll-list"
                    style="background: url(lottery_static/img/list-title.png) no-repeat center top / 17.25rem">
                    <!-- <marquee id="j_scroll_list" direction="up" truespeed="truespeed" scrolldelay="220"
                             behavior="scroll">
                        <p v-for="i in draw_list">恭喜 <span> {{i.mobile}} </span> 获得 <span> {{i.name}} </span></p>

                    </marquee> -->
                    <div class="scroll_content" id="scroll_content">

                    </div>
                </div>
                <!--<p class="ruletip">最终活动解释权归有限公司所有</p>-->
            </div>
        </div>
    </div>
    <!--无中奖记录 弹窗-->
    <p class="noPrizeRecord hide">无中奖记录</p>
    <!--没有次数 弹窗-->
    <div class="popup popup_text noTimes hide">
        <div class="popup_card ">
            <div class="">
                <div class="popup_title"></div>
                <div class="popup_content" v-if="lottery.lottery_type==1">
                    <p style="margin-top: 23px;">今日抽奖次数已用完</p>
                    <p>请明天再来哦！</p>
                    <div class="close-more popup_close j-pclose"><a href="javascript:;">关闭</a></div>
                </div>
                <div class="popup_content" v-else>
                    <p style="margin-top: 23px;">抽奖次数已用完</p>
                    <p>请下次再来哦！</p>
                    <div class="close-more popup_close j-pclose"><a href="javascript:;">关闭</a></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 没有权限 看看其他活动 弹窗 -->
    <div class="popup popup_more j_more hide">
        <div class="popup_card ">
            <!-- <div class="popup_close j-pclose"></div> -->
            <div class="">
                <div class="popup_title"></div>
                <div class="popup_content">
                    <p class="user-certify" style="text-align: center;transform: translateX(-13px)">
                        <i>XXX</i>用户专享
                    </p>
                    <p class="" style="margin-bottom: 10px">
                        <i>XXX</i>用户每天可以参与<i>X</i>次哦!
                    </p>
                    <!--<div class="check-more"><a href="javascript:;">查看其他活动</a></div>-->
                    <div class="close-more popup_close j-pclose"><a href="javascript:;">关闭</a></div>
                </div>
            </div>
        </div>
    </div>
    <!--未中奖 弹窗-->
    <div class="popup popup_sad j-sad hide">
        <div class="popup_card ">
            <div class="popup_close j-pclose"></div>
            <div class="">
                <div class="popup_title"></div>
                <div class="popup_content">
                    <div class="txt-area">
                        <p style="color:#333;">谢谢参与</p>
                    </div>
                    <div class="img-area">
                        <img src="lottery_static/img/i-sad.png">
                    </div>
                    <div class="get-btn j-pclose">知道了</div>
                </div>
            </div>
        </div>
    </div>
    <!--中奖啦 弹窗-->
    <div class="popup popup_yeah j-prize hide">
        <div class="popup_card ">
            <div class="popup_close j-pclose"></div>
            <div class="">
                <div class="popup_title"></div>
                <div class="popup_content">
                    <div class="txt-area">
                        <p style="color:#333;">恭喜您</p>
                        <p style="color:#333;">获得<span id="j_prize_name">{{prize.name}}</span></p>
                    </div>
                    <div class="img-area">
                        <img id="j_prize_img" :src="prize.img">
                    </div>
                    <div class="get-btn">

                        <a v-if="prize.type == 2" class="j_to_fill" @click="toInfo()">立即领取</a>
                        <a v-if="prize.type == 3" class="j_to_fill" @click="toList()">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--蒙层 end-->
    {include file="lottery/extend"}
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            is_login: "{$is_login}",
            lottery: {$lottery_json},
            enable_web: "{$site_config.enable_web}",
            userAgent: "SCGC_UA",
            nums: {$nums}, //剩余抽奖次数
            // nums:0, //剩余抽奖次数
            draw_list: [],
            draw_status: 0,
            prize: {
                data_id: 0, //中奖记录id
                prize_id: 0,
                name: '',
                type: 2, //0未中奖，1实物，2虚拟
                img: ""
            }
        },
        created: function () {
            this.get_draw_list();
        },
        computed: {},
        methods: {
            draw: function () {
                if (!this.checkLogin())
                    return false;

                if (this.draw_status !== 0) {
                    return false;
                }

                var _this = this;
                //查看活动时间
                var now = (new Date()).getTime();
                if (now < _this.lottery.start * 1000) {
                    layer.open({
                        content: '活动尚未开始',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    return false;
                }
                if (now > _this.lottery.end * 1000) {
                    layer.open({
                        content: '活动已结束',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    return false;
                }

                if (_this.nums < 1) {
                    $('.noTimes').removeClass('hide');
                    return false;
                }
                $.post("{:url('getLottery')}", {
                    id: _this.lottery.id
                }, function (res) {
                    if (res.code == 1) {
                        //未登录
                        _this.is_login = 0;
                        _this.checkLogin();
                    } else if (res.code == 3) {
                        //抽奖次数不足
                        $('.noTimes').removeClass('hide');
                    } else if (res.code == 0) {
                        //抽奖成功
                        var prize = res.data.prize;
                        _this.nums--;
                        _this.prize.data_id = prize.data_id;
                        _this.prize.prize_id = prize.prize_id;
                        _this.prize.name = prize.name;
                        _this.prize.type = prize.type;
                        _this.prize.img = prize.img;
                        setTimeout(() => {
                            _this._getLotterySucc(res.data)
                        }, 100);
                    } else {
                        layer.open({
                            content: res.msg,
                            skin: 'msg',
                            time: 2 //2秒后自动关闭
                        });
                    }
                    console.log(_this.prize);
                })

                // _this.nums--;
                // this._getLotterySucc();
            },
            //获取最近的中奖信息
            get_draw_list: function () {
                var _this = this;
                $.get("{:url('lottery/getDrawData')}", {
                    id: _this.lottery.id
                }, function (res) {
                    if (res.code == 1) {
                        _this.draw_list = res.data.list;

                        // 渲染获取中将列表
                        var tem = '';
                        var list = res.data.list;
                        for (var i = 0, ilen = list.length; i < ilen; i++) {
                            var thisItem = list[i];
                            tem += '<p>恭喜<span> ' + thisItem.mobile + ' </span> 获得 <span>' + thisItem.name + ' </span></p>'
                        }
                        // $('#scroll_content').html(tem);
                        var scrollArea = document.getElementById('scroll_content');
                        scrollArea.innerHTML = tem;
                        var li = scrollArea.getElementsByTagName("p");
                        //滚动
                        var liHeight = li[0].offsetHeight; //单行滚动的高度
                        var speed = 30; //滚动的速度
                        var timer;
                        var startTimer;
                        var delay = 1000; //滚动的间隔
                        scrollArea.scrollTop = 0;
                        scrollArea.innerHTML += scrollArea.innerHTML;

                        function startScroll() {
                            timer = setInterval(scrollUp, speed);
                            scrollArea.scrollTop++;
                        }

                        function scrollUp() {
                            if (scrollArea.scrollTop % liHeight == 0) {
                                clearInterval(timer);
                                setTimeout(startScroll, delay);
                            } else {
                                scrollArea.scrollTop++;
                                if (scrollArea.scrollTop >= scrollArea.scrollHeight / 2) {
                                    scrollArea.scrollTop = 0;
                                }
                            }
                        }
                        startTimer = setTimeout(startScroll, delay);
                        // scrollArea.onmouseover = function () {
                        //     clearInterval(startTimer);
                        //     clearTimeout(timer);
                        // };
                        // scrollArea.onmouseout = function () {
                        //     startTimer = setTimeout(startScroll, delay);
                        // }

                    }
                }, 'json')
            },
            //跳转到详情页
            toInfo: function () {
                window.location.href = "{:url('record')}" + "/id/" + this.prize.data_id
            },
            toList: function () {
                window.location.href = "{:url('myList')}" + "/id/" + this.lottery.id
            },
            checkLogin: function () {
                var unAppPopup = $('body').find('#j-to-download');
                if (this.checkIsApp(this.userAgent)) {
                    //app内
                    if (this.is_login == 1)
                        return true;
                    //app内未登陆需要登陆
                    $('#j-login').trigger('click');
                    return false;

                }

                //web端打开
                if (this.enable_web == 1) {
                    if (this.is_login == 1)
                        return true;

                    //未登陆
                    return false;
                }

                unAppPopup.removeClass('hide');
                return false;

            },
            checkIsApp: function (userAgent) {
                var ua = navigator.userAgent;
                //不在app内部时，点赞提示弹窗
                if (ua.indexOf(userAgent) > -1) {
                    return true;
                } else {
                    return false;
                }
            },
            /**
             * 抽奖弹窗0 没中奖
             * @private
             */
            _setTimeOutBox0: function () {

                $('.popup.j-sad').removeClass('hide');

                // $('.drp-content').removeClass('active');
                this.draw_status = 0;

            },
            /**
             * 抽奖弹窗1 中奖了
             * @private
             */
            _setTimeOutBox1: function () {

                $('.popup.j-prize').removeClass('hide');

                // $('.drp-content').removeClass('active');
                this.draw_status = 0;

            },
            /**
             * 抽奖出参处理
             * {"actawardawardForWeb": {
                    "id": 奖品id,
                    "mId": 操作记录id,
                    "levelName": "奖品等级",
                    "itemName": "奖品名称",
                    "needInfo": 1,是否需要填写用户信息 0不需要 1需要
                    "emptyactAward": 是否为空奖 0是1不是（谢谢参与）
                },
                "code": 200
            }
             * @param data
             * @private
             */
            _getLotterySucc: function () {
                var self = this;

                //开始抽奖
                self.draw_status = 1;

                if (self.prize.type == 1) { //空奖
                    setTimeout(self._setTimeOutBox0, 3000);
                } else {
                    // $('.j-prize').find('#j_prize_name').html(prizeInfo.itemName);
                    // $('.j-prize').find('#j_prize_img').attr('src', prizeInfo.awardPic);
                    // $('.j-prize').find('.j_to_fill').data('mid', prizeInfo.mId);
                    // $('.j-prize').find('.j_to_fill').data('pid', prizeInfo.id);

                    setTimeout(self._setTimeOutBox1, 3000);
                }

            },
        },
    })
</script>